<template>
  <div>
    <div class="second-userinfo mb20">
      <p class="jzt-flex-bt">
        <slot name="title">
          <span style="color: #3d3d3d">{{ title }}</span>
        </slot>
        <template v-if="isEdit">
          <img
            v-if="!selectedKh?.customerId"
            src="@/assets/images/add.png"
            width="20"
            height="20"
            alt=""
            @click="dialogVisibleKh = true"
          />
          <img v-else src="@/assets/images/close.png" width="20" height="20" alt="" @click="_isOpenReset = true" />
        </template>
      </p>

      <template v-if="selectedKh?.customerId">
        <div class="user-info pd16 mt18">
          <h3 class="f14 mb10">{{ selectedKh.receivingName || "-" }}</h3>
          <p class="f12 jzt-flex-start">
            <span class="label">电话：</span>
            <span>{{ selectedKh.receivingMobile || "-" }}</span>
          </p>
          <p class="f12 jzt-flex-start">
            <span class="label">地址：</span>
            <span>{{ selectedKh.address || "-" }}</span>
          </p>

          <div v-if="isEdit" class="edit-btn-wrap jzt-flex-center" @click="dialogVisibleKh = true">
            <el-icon><Edit /></el-icon>
          </div>
        </div>

        <slot name="remarkTitle">
          <h3 class="s-title f14 mb10">{{ remarkTitle }}</h3>
        </slot>
        <el-input v-model="jdTextarea" :disabled="!isEditRemark" :rows="4" type="textarea" placeholder="请输入" />
      </template>
    </div>

    <!-- 选择借调客户 -->
    <el-dialog v-model="dialogVisibleKh" title="" width="485" modal-class="following-custom-dialog" :show-close="false">
      <template #title>
        <p class="f18" style="color: #131414"><i class="dot-icon"></i>{{ dialogTitle }}</p>
      </template>
      <div class="dialog-content">
        <!-- <div style="position: sticky; top: 0; background-color: white; z-index: 2"> -->
        <div>
          <div class="search-wrap">
            <el-input v-model="customKey" clearable placeholder="输入业主名称/房屋地址/手机号" @change="getCustomListFun">
            </el-input>
          </div>
        </div>

        <!-- 关联客户列表 -->
        <div class="custom-list mt4 mb2">
          <template v-if="customList.length > 0">
            <div
              class="custom-item"
              :class="{ active: currObj.customerId === item.customerId }"
              v-for="(item, index) in customList"
              :key="index"
              @click="
                () => {
                  currObj = item;
                }
              "
            >
              <h3 class="mb10">
                <b>{{ item.receivingName }}</b>
              </h3>
              <p class="mb10 f12">电话：{{ item.receivingMobile }}</p>
              <p class="f12">地址：{{ item.address }}</p>
              <div class="active-icon" v-if="currObj.customerId === item.customerId">
                <el-icon><CircleCheckFilled /></el-icon>
              </div>
            </div>
          </template>
          <el-empty v-else description="暂无数据" />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer jzt-flex-center">
          <el-button
            type="info"
            class="jzt-button"
            @click="
              () => {
                dialogVisibleKh = false;
                currObj = { customerId: null };
              }
            "
            >取消</el-button
          >
          <el-button
            type="primary"
            class="jzt-button"
            :disabled="!currObj.customerId"
            @click="
              () => {
                dialogVisibleKh = false;
                crateBudgetQuotationFun();
              }
            "
            >确认</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 清空取消定制商品数据的二次确认 提示弹窗 -->
    <ActionSubmitDialog v-model:isOpen="_isOpenReset" title="" message="" submitBtnText="确认" @submit="resetData">
      <template #message>
        <p class="f14" style="color: #3d3d3d">{{ actionTips }}</p>
      </template>
    </ActionSubmitDialog>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted, watch } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { getCustomList } from "@/apis/procure/outbound";
import ActionSubmitDialog from "@/components/ActionSubmitDialog";

const customList = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]); //关联客户列表
const dialogVisibleKh = ref(false); //选择借调客户弹窗
const customKey = ref("");
const currObj = ref({ customerId: null }); //选择状态active的借调客户
const selectedKh = ref({}); //确认选中的借调客户暂存
const jdTextarea = ref(""); //借调备注说明
const _isOpenReset = ref(false);

const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  },
  isEdit: {
    //是否可以编辑借调客户
    type: Boolean,
    default: true
  },
  isEditRemark: {
    //是否可以编辑备注信息
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: "关联借调客户信息"
  },
  remarkTitle: {
    type: String,
    default: "关联借调备注说明"
  },
  dialogTitle: {
    type: String,
    default: "添加关联借调客户"
  },
  actionTips: {
    type: String,
    default: "确定要取消关联借调客户信息？"
  }
});

watch(
  () => props.detail,
  val => {
    console.log("这是订单详情===", val);
    if (val) {
      const obj = { ...val };
      selectedKh.value.customerId = obj.secondmentCustomerId;
      selectedKh.value.receivingName = obj.secondmentCustomerName;
      selectedKh.value.receivingMobile = obj.secondmentCustomerPhone;
      selectedKh.value.address = obj.secondmentCustomerAddress;
      jdTextarea.value = obj.secondmentCustomerRemark;
    }
  },
  { deep: true, immediate: true }
);

onMounted(() => {
  getCustomListFun();
});

//确认选中借调客户
const crateBudgetQuotationFun = () => {
  console.log("选中了借调客户，暂时缓存在本地");
  selectedKh.value = currObj.value;
};

//获取关联客户列表
const getCustomListFun = () => {
  getCustomList({ search: customKey.value }).then(res => {
    if (res.code === 200) {
      customList.value = res.data;
    }
  });
};

//清空已选择的借调客户信息
const resetData = () => {
  selectedKh.value = {};
  jdTextarea.value = "";
  _isOpenReset.value = false;
};

const getData = () => {
  return { ...selectedKh.value, secondmentCustomerRemark: jdTextarea.value };
};

defineExpose({ getData });
</script>

<style lang="scss">
.following-custom-dialog {
  .dot-icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #409eff;
    margin-right: 8px;
    margin-bottom: 4px;
  }
  .dialog-content {
    height: 500px;
    overflow-y: auto;
    & > div > p {
      color: #3d3d3d;
      margin-bottom: 10px;
    }
    .search-wrap {
      display: flex;
      .el-button {
        margin-left: 4px;
      }
      .el-input__wrapper {
        background-color: #f2f3f5;
      }
    }
    .add-custom.el-button:hover {
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    }
    .custom-list {
      padding: 20px;
      border: 1px solid #e1e6ed;
      .custom-item {
        border: 1px solid #e1e6ed;
        padding: 16px;
        margin-bottom: 10px;
        position: relative;
        border-radius: 4px;
        cursor: pointer;
        h3 {
          color: #1d2129;
          font-weight: normal;
          b {
            font-weight: normal;
          }
          i {
            font-style: normal;
            font-size: 12px;
          }
        }
        .active-icon {
          position: absolute;
          font-size: 20px;
          right: 36px;
          top: calc(50% - 10px);
          color: #007dff;
        }
        &.active {
          border: 2px solid #007dff;
          box-shadow: 0px 0px 8px 0px rgba(4, 54, 114, 0.2);
        }
      }
    }
  }
}
.following-custom-popper.el-popper {
  width: 144px;
  padding: 16px !important;
  color: black;
}
</style>
<style lang="scss" scoped>
.second-userinfo {
  .user-info {
    background-color: white;
    border-radius: 4px;
    position: relative;
    .h3 {
      color: #1d2129;
    }
    p {
      color: #4e5969;
      line-height: 20px;
      .label {
        width: 40px;
        color: #86909c;
      }
    }
    .edit-btn-wrap {
      position: absolute;
      right: 0;
      top: 0;
      width: 24px;
      height: 24px;
      border-radius: 0 4px 0 4px;
      background-color: rgba(19, 20, 20, 0.19);
      color: white;
    }
  }
  .s-title {
    color: #4e5969;
    font-weight: normal;
    margin: 24px 0 10px 0;
  }
  :deep(.el-textarea__inner) {
    background-color: white !important;
  }
}
</style>
